import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import classnames from 'classnames';
// import { UNIT_MAP } from '@/pages/official-doc/constants';
import { SecondConfirm } from '@/components/second-confirm';
import StandardCard from '../standard-card';
import { FormContentType } from '@/pages/official-doc/components/doc-content/interface.d';
import { getMatterStandardUnit } from '@/services/laber-declare';
import { FormatDictData } from '@/utils/formatter';
interface Props {
  type: FormContentType;
  data: any;
  handleDelete?: (id: string) => void;
  handleClick?: (params: any) => void;
}

const ContentCard: React.FC<Props> = props => {
  const { data, type, handleDelete, handleClick } = props;
  //  请求页面中标准字典的列表
  const [matterStandardUnitMap, setMatterMap] = useState<object>({});
  const getMatterList = async () => {
    const matterData = await getMatterStandardUnit();
    const { map } = FormatDictData(matterData.data, 'uint', 'meaning');
    setMatterMap(map);
  };
  useEffect(() => {
    getMatterList();
  }, []);
  const getDeleteMessage = () => {
    let result = '';
    switch (type) {
      case FormContentType.TOTAL:
        result = '已同意事项';
        break;
      case FormContentType.CONTENT:
        result = '发放标准';
        break;
      default:
        result = '项';
    }
    return `确认删除该${result}？`;
  };

  const getTitle = () => {
    let result = '';
    switch (type) {
      case FormContentType.TOTAL:
        result = '已同意事项';
        break;
      case FormContentType.CONTENT:
        result = '发放标准';
        break;
      default:
        break;
    }
    return `${result} ${data.sort}`;
  };

  const handleCardClick = () => {
    handleClick && handleClick(data);
  };

  const handleDeleteButtonClick = (
    e: React.MouseEvent<HTMLElement, MouseEvent>
  ) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    if (handleDelete) {
      const params = {
        buttons: [
          {
            text: '删除',
            cb: () => handleDelete(data.id)
          },
          {
            text: '取消'
          }
        ],
        message: getDeleteMessage()
      };
      SecondConfirm(params);
    }
  };

  return (
    <div className={styles.wrap} onClick={handleCardClick}>
      <h2 className={classnames(styles.cardTitle, 'ratio-border-bottom-100vw')}>
        <span className={styles.cardTitleText}>{getTitle()}</span>
        <i
          className={classnames('icon', 'iconfont', styles.icon)}
          onClick={handleDeleteButtonClick}
        >
          &#xe6e2;
        </i>
      </h2>
      {type === FormContentType.TOTAL ? (
        // 事项卡片
        <React.Fragment>
          <div className={styles.contentTitle}>
            <div className={styles.titleText}>{data.matterName}</div>
            {/* <div className={styles.money}>¥{data.matterTotal || 0}</div> */}
            <div className={styles.money}>
              {data.matterTotal === -1 ||
              (!data.matterTotal && data.matterTotal !== 0)
                ? '不限额'
                : `¥${data.matterTotal || 0}`}
            </div>
          </div>
          <div className={styles.contentDetail}>
            <p className={styles.detailItem}>
              <span className={styles.label}>经办人</span>
              <span className={styles.value}>
                {data?.managerName || data.manager?.[0]?.name}
              </span>
            </p>
            <p
              className={classnames(
                styles.detailItem,
                !data.remark ? styles.hide : ''
              )}
            >
              <span className={styles.label}>备注</span>
              <span className={styles.value}>{data.remark}</span>
            </p>
            <p className={styles.detailItem}>
              <span className={styles.label}>允许自定义标准</span>
              <span className={styles.value}>
                {data.isCustomStandard == 1 ? '允许' : '禁止'}
              </span>
            </p>
          </div>
          {data.standardAddList?.map((item: any, index: number) => (
            <div
              className={classnames(
                styles.standard,
                'ratio-border',
                data.remark ? styles.withRemark : ''
              )}
              key={index}
            >
              <p
                className={classnames(
                  styles.standardItem,
                  data.remark ? 'ratio-border-bottom' : ''
                )}
              >
                <span className={styles.label}>{item.standardName}</span>
                <span className={styles.value}>
                  {/* item.priceType为数组时，判断数组第一项是否为0 */}
                  {item.priceType === 0 ||
                  (Array.isArray(item.priceType) && item.priceType[0] === 0)
                    ? item.minPrice || item.maxPrice
                    : `${item.minPrice || 0}-${item.maxPrice || 0}`}
                  {matterStandardUnitMap[item.unit]?.label}
                </span>
              </p>
              <p
                className={classnames(
                  styles.remark,
                  !item.remark ? styles.hide : ''
                )}
              >
                <span className={styles.remarkText}>备注</span>
                <span className={styles.remarkContent}>{item.remark}</span>
              </p>
            </div>
          ))}
        </React.Fragment>
      ) : (
        // 明细卡片
        <StandardCard data={data} />
      )}
    </div>
  );
};

export default ContentCard;
